import React,{useState} from 'react'
import { NavBar} from 'antd-mobile'
import {useNavigate} from 'react-router-dom'
import styles from './css/one.module.scss'
import { Image } from 'antd-mobile'




export default function One() {
  const navigate = useNavigate()
  const data = [
    {id:1,img:'/7.png',content:'你提交的个人信息修改已经通过。你本月还有修改资料次数:个人头像0次',time:'09-6 17:52'},
    {id:2,img:'/7.png',content:'你的账号于2099-03-27 09:40:17进行了登录操作。如非本人操作，账号可能被盗，建议及时修改密码。参考设备:iPhone 12',time:'4天前'},
    {id:3,img:'/7.png',content:'你发起的3月27日20:00一起跑已招募结束!点击查看3月27日晚上8点，相约江城工程学院东篮球场一起夜跑，2人即可成队',time:'3分钟前'},
  ]



  const back = () =>{
    navigate('/app/message')
  }



  return (
    <div>
      <NavBar onBack={back}>系统消息</NavBar>
      <p></p>
      {
        data.map((item)=>{
          return(
            <div key={item.id} className={styles.main}>
              <p className={styles.time}>{item.time}</p>
              <div className={styles.content}>
                    <Image
                  src={item.img}
                  width={44}
                  height={44}
                  fit='cover'
                  style={{ borderRadius: 32 }}
                />
                <p className={styles.p_content}>{item.content}</p>
              </div>
            </div>
          )
        })
      }
    </div>
  )
}
